﻿<html>
<head>
<title>dojox.gfx: interactive analog clock</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
    @import "../../../dojo/resources/dojo.css";
    @import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"></script>
<script type="text/javascript">

dojo.require("dojox.gfx");
dojo.require("dojo.date.locale");
var current_time = new Date();
var hour_hand = null;
var minute_hand = null;
var second_hand = null;
var hour_shadow = null;
var minute_shadow = null;
var second_shadow = null;
var center = {x: 385 / 2, y: 385 / 2};
var hour_shadow_shift = {dx: 2, dy: 2};
var minute_shadow_shift = {dx: 3, dy: 3};
var second_shadow_shift = {dx: 4, dy: 4};
var selected_hand = null;
var container = null;
var container_position = null;
var text_time = null;
var diff_time = new Date();
placeHand = function (shape, angle, shift) {
    var move = {dx: center.x + (shift ? shift.dx : 0), dy: center.y + (shift ? shift.dy : 0)};
    return shape.setTransform([move, dojox.gfx.matrix.rotateg(angle)]);
};
placeHourHand = function (h, m, s) {
    var angle = 30 * (h % 12 + m / 60 + s / 3600);
    placeHand(hour_hand, angle);
    placeHand(hour_shadow, angle, hour_shadow_shift);
};
placeMinuteHand = function (m, s) {
    var angle = 6 * (m + s / 60);
    placeHand(minute_hand, angle);
    placeHand(minute_shadow, angle, minute_shadow_shift);
};
placeSecondHand = function (s) {
    var angle = 6 * s;
    placeHand(second_hand, angle);
    placeHand(second_shadow, angle, second_shadow_shift);
};
reflectTime = function (time, hold_second_hand, hold_minute_hand, hold_hour_hand) {
    if (!time) time = current_time;
    var h = time.getHours();
    var m = time.getMinutes();
    var s = time.getSeconds();
    if (!hold_hour_hand) placeHourHand(h, m, s);
    if (!hold_minute_hand) placeMinuteHand(m, s);
    if (!hold_second_hand) placeSecondHand(s);
    text_time.innerHTML = dojo.date.locale.format(time, {selector: "time", timePattern: "h:mm:ss a"});
};
resetTime = function () {
    current_time = new Date();
    reflectTime();
};
tick = function () {
    current_time.setSeconds(current_time.getSeconds() + 1);
    reflectTime();
};
advanceTime = function () {
    if (!selected_hand) {
        tick();
    }
};
normalizeAngle = function (angle) {
    if (angle > Math.PI) {
        angle -= 2 * Math.PI;
    } else if (angle < -Math.PI) {
        angle += 2 * Math.PI;
    }
    return angle;
};
calculateAngle = function (x, y, handAngle) {
    try {
        return normalizeAngle(Math.atan2(y - center.y, x - center.x) - handAngle);
    } catch (e) {
        // supress
    }
    return 0;
};
getSecondAngle = function (time) {
    if (!time) time = current_time;
    return (6 * time.getSeconds() - 90) / 180 * Math.PI;
};
getMinuteAngle = function (time) {
    if (!time) time = current_time;
    return (6 * (time.getMinutes() + time.getSeconds() / 60) - 90) / 180 * Math.PI;
};
getHourAngle = function (time) {
    if (!time) time = current_time;
    return (30 * (time.getHours() + (time.getMinutes() + time.getSeconds() / 60) / 60) - 90) / 180 * Math.PI;
};
onMouseDown = function (evt) {
    selected_hand = evt.target;
    diff_time.setTime(current_time.getTime());
    dojo.stopEvent(evt);
};
onMouseMove = function (evt) {
    if (!selected_hand) return;
    if (evt.target == second_hand.getEventSource() || evt.target == minute_hand.getEventSource() || evt.target == hour_hand.getEventSource()) {
        dojo.stopEvent(evt);
        return;
    }
    if (dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())) {
        var angle = calculateAngle(evt.clientX - container_position.x, evt.clientY - container_position.y, normalizeAngle(getSecondAngle()));
        var diff = Math.round(angle / Math.PI * 180 / 6); // in whole seconds
        current_time.setSeconds(current_time.getSeconds() + Math.round(diff));
        reflectTime();
    } else if (dojox.gfx.equalSources(selected_hand, minute_hand.getEventSource())) {
        var angle = calculateAngle(evt.clientX - container_position.x, evt.clientY - container_position.y, normalizeAngle(getMinuteAngle(diff_time)));
        var diff = Math.round(angle / Math.PI * 180 / 6 * 60); // in whole seconds
        diff_time.setTime(diff_time.getTime() + 1000 * diff);
        reflectTime(diff_time, true);
    } else if (dojox.gfx.equalSources(selected_hand, hour_hand.getEventSource())) {
        var angle = calculateAngle(evt.clientX - container_position.x, evt.clientY - container_position.y, normalizeAngle(getHourAngle(diff_time)));
        var diff = Math.round(angle / Math.PI * 180 / 30 * 60 * 60); // in whole seconds
        diff_time.setTime(diff_time.getTime() + 1000 * diff);
        reflectTime(diff_time, true, true);
    } else {
        return;
    }
    dojo.stopEvent(evt);
};
onMouseUp = function (evt) {
    if (selected_hand && !dojox.gfx.equalSources(selected_hand, second_hand.getEventSource())) {
        current_time.setTime(diff_time.getTime());
        reflectTime();
    }
    selected_hand = null;
    dojo.stopEvent(evt);
};
makeShapes = function () {
    // prerequisites
    container = dojo.byId("gfx_holder");
    container_position = dojo.coords(container, true);
    text_time = dojo.byId("time");
    var surface = dojox.gfx.createSurface(container, 385, 385);
    surface.createImage({width: 385, height: 385, src: "images/clock_face_black.jpg"});
    // hand shapes
    var hour_hand_points = [
        {x: -7, y: 15},
        {x: 7, y: 15},
        {x: 0, y: -60},
        {x: -7, y: 15}
    ];
    var minute_hand_points = [
        {x: -5, y: 15},
        {x: 5, y: 15},
        {x: 0, y: -100},
        {x: -5, y: 15}
    ];
    var second_hand_points = [
        {x: -2, y: 15},
        {x: 2, y: 15},
        {x: 2, y: -105},
        {x: 6, y: -105},
        {x: 0, y: -116},
        {x: -6, y: -105},
        {x: -2, y: -105},
        {x: -2, y: 15}
    ];
    // create shapes
    hour_shadow = surface.createPolyline(hour_hand_points).setFill([0, 0, 0, 0.1]);
    hour_hand = surface.createPolyline(hour_hand_points).setStroke({color: "black", width: 2}).setFill("#889");
    minute_shadow = surface.createPolyline(minute_hand_points).setFill([0, 0, 0, 0.1]);
    minute_hand = surface.createPolyline(minute_hand_points).setStroke({color: "black", width: 2}).setFill("#ccd");
    second_shadow = surface.createPolyline(second_hand_points).setFill([0, 0, 0, 0.1]);
    second_hand = surface.createPolyline(second_hand_points).setStroke({color: "#800", width: 1}).setFill("#d00");
    // next 3 lines kill Silverlight because its nodes do not support CSS
    //dojox.gfx._addClass(hour_hand  .getEventSource(), "movable");
    //dojox.gfx._addClass(minute_hand.getEventSource(), "movable");
    //dojox.gfx._addClass(second_hand.getEventSource(), "movable");
    surface.createCircle({r: 1}).setFill("black").setTransform({dx: 192.5, dy: 192.5});
    // attach events
    hour_hand.connect("onmousedown", onMouseDown);
    minute_hand.connect("onmousedown", onMouseDown);
    second_hand.connect("onmousedown", onMouseDown);
    dojo.connect(container, "onmousemove", onMouseMove);
    dojo.connect(container, "onmouseup", onMouseUp);
    dojo.connect(dojo.byId("reset"), "onclick", resetTime);
    // start the clock
    resetTime();
    window.setInterval(advanceTime, 1000);
};
dojo.addOnLoad(makeShapes);

</script>
<style type="text/css">
    .movable {
        cursor : hand;
    }
</style>
</head>
<body>
<h1>dojox.gfx: interactive analog clock</h1>

<p>Grab hands and set your own time.</p>

<p>Warning: Canvas renderer doesn't implement event handling.</p>

<div id="gfx_holder" style="width: 385px; height: 385px;"></div>
<p>Current time: <span id="time"></span>.</p>

<p>
    <button id="reset">Reset</button>
</p>
</body>
</html>
